<template>
	<view class="all">
		<view class="bg"></view>
		<!-- 加油站信息 -->
		<view class="top">
			<image src="/static/05refuel/background@3x.png" mode=""></image>
			<view class="mess">
				<view class="topLeft">
					<view>{{ gasStation.name }}</view>
					<view>营业时间：{{gasStation.businessTime}}</view>
					<view class="address">
						<view>位置：{{gasStation.address}}</view>
						<image src="/static/05refuel/plane@3x.png" alt="" />
					</view>
				</view>
				<view class="topRight">
					<image src="/static/05refuel/phone@3x.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 油价详情 -->
		<view class="bottom">
			<view>油价详情</view>
			<view>
				<view class="item">
					<view>92#</view>
					<view class="itemMoney">￥5.86/L</view>
				</view>
				<view class="item">
					<view>95#</view>
					<view class="itemMoney">￥5.86/L</view>
				</view>
				<view>
					<view>98#</view>
					<view class="itemMoney">￥5.86/L</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const gasStation = ref({
		name: "中国石油加油站",
		distance: "556m",
		discount: ["满200减20","满500减60"],
		image: '/static/05refuel/background@3x.png',
		businessTime: "周一至周五",
		price: "5.66",
		address: "中国石油加油站(雪松路站)",
		latitude: 34.82845,  // 纬度
		longitude: 113.55785500000002  // 经度
	})

</script>

<style scoped>
	       
/* 全局背景 */
.all{
	padding-top: 10rpx;
	box-sizing: border-box; 
	position: relative;
	z-index: 1;
}
.bg{
	background-color: #0472fe;
	width: 100%;
	height: 300rpx;
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
}
.top{
	background-color: #fff;
	margin: 10rpx;
	padding: 20rpx;
	border-radius: 10rpx;
}
.top>image{
	height: 400rpx;
	width: 690rpx;
	border-radius: 20rpx;
}


.mess{
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
}
.topLeft > :nth-child(1){
	font-size: 36rpx;
}
.topLeft > :nth-child(2){
	font-size: 24rpx;
	margin: 10rpx 0;
}

.address{
	font-size: 24rpx;
	display: flex;
}
.address > image{
	width: 20rpx;
	height: 20rpx;
	margin: 10rpx;
}
.topRight{
	margin-top: 10rpx;
	background-color: #0472fe;
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
}
.topRight image{
	width: 60rpx;
	height: 60rpx;
	margin: 30rpx;
}
.bottom{
	background-color: #fff;
	margin: 10rpx;
	padding: 20rpx;
	border-radius: 10rpx;
}
.bottom > :nth-child(1){
	font-size: 36rpx;
}
.bottom > :nth-child(2){
	
}
.bottom > :nth-child(2) view{
	display: flex;
	justify-content: space-around;
	margin: 5rpx;
	font-size: 28rpx;
}
.item{
	border-bottom: #eeeeee 1rpx solid;
}
.itemMoney{
	color: darkorange;
}
</style>
